<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	
	<title>Anything Zoomer | Image</title>
	
	<link rel="stylesheet" href="css/style.css" type="text/css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/zoomer.jquery.js"></script>
	<script type="text/javascript">
        $(function() {
                   	
        	$("#wrap").anythingZoomer({
        	
        	   expansionSize: 30,
        	   speedMultiplier: 2.2
        	
        	});
        				
        });
    </script>
</head> 
 
<body id="image">  

    <div id="main-content">
    
        <h1>AnythingZoomer <span style="font-size: 20px;">v1.0</span></h1>
        
	   <a href="AnythingZoomer.zip" id="dl">Download</a>

        <ul id="nav">
            <li class="cal"><a href="index.html">Calendar Demo</a></li>
            <li class="img"><a href="image.html">Image Demo</a></li>
            <li class="txt"><a href="text.html">Text Demo</a></li>
            <li class="dbl"><a href="double.html">Double Demo</a></li>
            <li class="use"><a href="use.html">Usage</a></li>
        </ul>
                
        <h2>Image Demo</h2>
	   
	    <p>Mouse over to see zoomed in version, double click to toggle between large and small versions.</p>
					
		<div id="wrap">
			
			<div id="small">
				
				<img src="images/rushmore_small.jpg" alt="small rushmore" />
				
			</div>

	        <div id="mover">
		
                <div id="overlay"></div>

                <div id="large">

						<img src="images/rushmore.jpg" alt="big rushmore" />							
				
				</div>
				
			</div>
			
		</div>
		
	</div>
	
</body>

</html>
